<template>
  <div class="edu-exper-contianer">
    <TitleB
      :title="eduInfo.moduleTitle"
      iconName="el-icon-school"
      :backgroundColor="myThemeColor"
      @titleBValUpdate="onModuleTitleUpdate"
      @btnClick="onBtnClick"

    ></TitleB>
    <Education
      v-for="edu in eduInfo.eduList"
      :key="edu.id"
      :eduItem="edu"
      @eduInfoUpdate="onEduInfoUpdate(edu.id, $event)"
    ></Education>
  </div>
</template>

<script>
import TitleB from '@/components/base/TitleB.vue'
import Education from '@/components/Modules/Education.vue'
import { nanoid } from 'nanoid'
import {mapGetters} from 'vuex'
export default {
  data() {
    return {
      eduInfo: {
        moduleTitle: '',
        eduList: [
        ],
      },
      id: '',
    }
  },
  props: {
    eduProps: {
      type: Object,
      default: function () {
        return {
          moduleTitle: '教育经历',
          eduList: [
            {
              id: nanoid(),
              time: '2016-2020',
              schoolName: '浙江工业大学',
              major: '软件工程',
              degree: '本科',
              dec: '',
            },
            {
              id: nanoid(),
              time: '2016-2020',
              schoolName: '浙江工业大学',
              major: '软件工程',
              degree: '硕士',
              dec: '',
            },
          ],
        }
      },
    },
    moduleId: {
      type: String,
      default: nanoid(),
    },
  },
  computed:{
    ...mapGetters(['myThemeColor'])
  },
  created() {
    this.eduInfo = { ...this.eduProps }
    this.id = this.moduleId
  },
  methods: {
    // 修改模块标题
    onModuleTitleUpdate(newTitle){
      this.eduInfo.moduleTitle = newTitle
      this.updateStore()
    },
    onBtnClick(tag) {
      switch (tag) {
        case 'add':
          this.addEduExper()
          break
        case 'delete':
          this.deleteEduExper()
          break
        case 'remove':
          this.removeModule()
          break
      }
    },
    // 添加一条教育经历
    addEduExper() {
      let id = nanoid()
      const eduExper = {
        id,
        time: '时间',
        schoolName: '学校名称',
        major: '专业',
        degree: '学历',
        dec: '',
      }
      this.eduInfo.eduList.push(eduExper)
      this.updateStore()
    },
    // 删除一条教育经历
    deleteEduExper() {
      if (this.eduInfo.eduList.length <= 1) {
        this.$message.warning('至少需要一条数据')
      } else {
        this.eduInfo.eduList.pop()
        this.updateStore()
      }
    },
    // 移除该模块
    removeModule() {
      this.$store.commit('removeModule', this.id)
    },
    // 某一条教育经历信息修改
    onEduInfoUpdate(eduId, newEduInfo) {
      this.eduInfo.eduList.some((item) => {
        if (item.id === eduId) {
          Object.assign(item, newEduInfo)
          return
        }
      })
      this.updateStore()
    },
    // 修改仓库数据
    updateStore() {
      const newData = { props: this.eduInfo, id: this.id }
      this.$store.commit('setModule', newData)
    },
  },
  components: {
    TitleB,
    Education,
  },
}
</script>

<style lang="less" scoped>
.edu-exper-contianer {
  width: 100%;
  padding: 0 15px;
  margin-bottom: 5px;
}
</style>
